window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    var w = focus.offsetWidth;
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -w * index;
        ul.style.transition = 'all, .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            var translatex = -w * index;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            var translatex = -w * index;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    var x1 = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        x1 = e.targetTouches[0].pageX;
    });
    ul.addEventListener('touchmove', function (e) {
        flag = true;
        moveX = e.targetTouches[0].pageX - x1;
        var translatex = -w * index + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        e.preventDefault();
    });
    ul.addEventListener('touchend', function () {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX < 0) {
                    index++;
                } else {
                    index--;
                }
                var translatex = -w * index;
                ul.style.transition = 'all, .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                var translatex = -w * index;
                ul.style.transition = 'all, .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -w * index;
            ul.style.transition = 'all, .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('.nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function () {
        window.scroll(0, 0);
    });
})